<template>
    <div>
    <div class="block">
        <el-button type="success" @click="goAddout">新增出库</el-button>
        <el-input v-model="condition.formNo" placeholder="请输入单号" style="width: 200px;"></el-input>
        <el-date-picker
        v-model="value"
        type="daterange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['00:00:00', '23:59:59']"
        value-format="yyyy-MM-dd hh:mm:ss">
        </el-date-picker>
        <el-button @click="show" type="primary">确定</el-button>
        <el-button class="el-icon-refresh" @click="refresh" type="success" plain></el-button>
    </div>
    <el-row>
      <el-col>
        <template>
          <el-table
            :data="outStockList"
            tooltip-effect="dark"
            style="width: 100%">
            <el-table-column type="index" :index="indexMethod">
            </el-table-column>
            <el-table-column prop="type" label="出库单类型">
                <template slot-scope="scope">
                    <span v-if="scope.row.type == 1">销售出库</span>
                    <span v-if="scope.row.type == 2">代存出库</span>
                </template>
            </el-table-column>
            <el-table-column prop="formNo" label="单号"> </el-table-column>
            <el-table-column prop="customer" label="客户"> </el-table-column>
            <el-table-column prop="createTime" label="创建时间"> </el-table-column>
            <el-table-column prop="formMaker" label="制单人"> </el-table-column>
            <el-table-column prop="auditor" label="审核人"> </el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.state == 1" style="color: green;">待出库</span>
                    <span v-else-if="scope.row.state == 2" style="color: red;">审核中</span>
                    <span v-else-if="scope.row.state == 3" style="color: blue;">已出库</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="success" v-if="scope.row.state == 1" @click="sureArrive(scope.row)">确认出库</el-button>
                <el-button type="danger" v-else-if="scope.row.state == 2" @click="sureAudit(scope.row)">确认审核</el-button>
                <el-button type="primary" v-else-if="scope.row.state == 3" @click="detail(scope.row)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-col>
    </el-row>
    <el-row>
        <el-col :span="8" :offset="10">
            <div class="block">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>
        </el-col>
    </el-row>
    
    <el-dialog title="出库单详情" :visible.sync="dialogTableVisible">
        <el-table :data="detailList">
            <el-table-column property="goodsName" label="商品名"></el-table-column>
            <el-table-column property="meteriType" label="材料"></el-table-column>
            <el-table-column property="purity" label="品质"></el-table-column>
            <el-table-column property="unitPrice" label="价格/克"></el-table-column>
            <el-table-column property="weight" label="重量"></el-table-column>
            <el-table-column property="num" label="数量"></el-table-column>
        </el-table>
    </el-dialog>
</div>
</template>

<script>

export default {
    data() {
        return {
            outStockList: [],
            condition: {
                startTime: '',
                endTime: '',
                formNo: '',
            },
            value: '',
            detailList: [],
            dialogTableVisible: false,
            total: 0,
            current: 1,
            size: 10,
        }; 
    },
    mounted: function (){
        this.getOutStockList()
    },
    methods: {
        show: function(){
            this.current = 1
            this.condition.startTime = this.value[0];
            this.condition.endTime = this.value[1];
            this.$axios.post("/outStock/searchByCondition",this.condition).then(res =>{
                this.outStockList = [];
                this.outStockList = res.data.data;
                this.total = this.outStockList.length;
            });
        },
        getOutStockList(){
            this.outStockList = [];
            this.$axios.get("/outStock/all/" + this.current + "/" + this.size).then(res => {
                this.outStockList = res.data.data.records;
                this.total = res.data.data.total
            });
        },
        indexMethod(index) {
            return index + 1;
        },
        sureArrive(row){
            row.state = 2;
            row.auditor = window.localStorage.getItem("account")
            this.updateState(row.formNo,row.state);
        },
        sureAudit(row){
            row.state = 3;
            row.auditor = window.localStorage.getItem("account")
            this.updateState(row.formNo,row.state);
        },
        updateState(formNo,state){
            this.$axios.put("/outStock/updateState/" + formNo +"/" + state).then(res => {});
        },
        goAddout(){
            this.$router.push("/addout");
        },
        detail(row){
            
            this.$axios.get("/outStock/detail/" + row.id).then(res => {
                this.detailList = [];
                this.detailList = res.data.data;
                console.log(res.data)
                this.dialogTableVisible = true;
            });
        },
        refresh(){
            this.outStockList = [];
            this.value = "";
            this.condition.endTime = ''
            this.condition.startTime = ''
            this.condition.formNo = ""
            this.current = 1
            this.getOutStockList()
        },
        handleSizeChange(val) {
            this.size = val
            this.getOutStockList()
        },
        handleCurrentChange(val) {
            this.current = val
            this.getOutStockList()
        }
    },
}
</script>

<style scoped>

</style>